<template>
  <div class="home app-container">
    <el-card class="top">
        <template #header>
            <div class="flex_sb">
                <p class="title_1">待办事项</p>
                <p class="tip flex_sb">
                    <span class="mr20">待领取商机<span class="tipTxt">10</span>个，待领取项目<span class="tipTxt">10</span>个。</span>
                    <el-button link type="primary" @click="toPage('/workbench/myTask')">更多></el-button>
                </p>
            </div>
        </template>
        <div class="grid_1">
            <div class="m10">
                <p class="flex_c mb10">
                    <span>待审批客户</span>
                    <el-icon class="ml5" :color="theme"><InfoFilled /></el-icon>
                </p>
                <el-progress :text-inside="true" :stroke-width="15" :percentage="20" status="exception" >
                    <span>12</span>
                </el-progress>
            </div>
            <div class="m10">
                <p class="flex_c mb10">
                    <span>待审批商机</span>
                    <el-icon class="ml5" :color="theme"><InfoFilled /></el-icon>
                </p>
                <el-progress :text-inside="true" :stroke-width="15" :percentage="50" status="exception" >
                    <span>12</span>
                </el-progress>
            </div>
            <div class="m10">
                <p class="flex_c mb10">
                    <span>待审批项目</span>
                    <el-icon class="ml5" :color="theme"><InfoFilled /></el-icon>
                </p>
                <el-progress :text-inside="true" :stroke-width="15" :percentage="70" status="exception" >
                    <span>12</span>
                </el-progress>
            </div>
        </div>
    </el-card>
    <el-card class="top">
        <template #header>
            <p class="title_1">概况统计-默认</p>
        </template>
        <div class="flex_column">
            <el-tabs v-model="statisticsTab" @tab-change="changeTab">
                <el-tab-pane label="客户数量统计" name="kh"></el-tab-pane>
                <el-tab-pane label="商机数量统计" name="sj"></el-tab-pane>
                <el-tab-pane label="项目数量统计" name="xm"></el-tab-pane>
            </el-tabs>
            <div style="flex: 1;width: 100%;">
                <Bar :Xdata="Xdata" :seriesData="barData"/>
            </div>
        </div>
    </el-card>
    <el-card class="bottom">
        <template #header>
            <p class="title_1">快捷功能</p>
        </template>
        <ul class="grid_box pd10">
            <li class="cardBtn flex_c_c" @click="toPage('/customer/edit')">
                <svg-icon icon-class="peoples"/>
                <span>新建客户</span>
            </li>
            <li class="cardBtn flex_c_c" @click="toPage('/business/add')">
                <svg-icon icon-class="color"/>
                <span>新建商机</span>
            </li>
            <li class="cardBtn flex_c_c" @click="toPage('/project/add')">
                <svg-icon icon-class="redis"/>
                <span>新建项目</span>
            </li>
        </ul>
    </el-card>
    <el-card class="bottom">
        <template #header>
            <p class="title_1">概况统计-客户</p>
        </template>
        <Pie :seriesData="pieData"/>
    </el-card>
    <el-card class="bottom">
        <template #header>
            <div class="flex_sb">
                <p class="title_1">待阅消息</p>
                <el-button link type="primary" @click="toPage('/workbench/myMessage')">更多></el-button>
            </div>
        </template>
        <ul class="line_box">
            <li class="line">您于2024-07-23提交的法人客户<name>【国家电网有限公司】</name>变更申请已通过</li>
            <li class="line">您于2024-07-23提交的法人客户<name>【苏州市轨道交通车辆有限公司】</name>变更申请已通过</li>
            <li class="line">您于2024-07-23提交的法人客户<name>【中铁十七局建设有限公司】</name>新增审批申请已通过</li>
        </ul>
    </el-card>
  </div>
</template>

<script setup name="WorkbenchHome">
import Bar from "@/components/Echarts/Bar.vue"
import Pie from "@/components/Echarts/Pie.vue"
import useSettingsStore from "@/store/modules/settings";
import { reactive, ref } from "vue";
const router = useRouter()

const toPage = (path) => {
    router.push({ path })
}
// 设置主题色
const theme = computed(() => useSettingsStore().theme);
// 概况统计-默认-start
const statisticsTab = ref("kh")
const obj = {
    kh: ["待调整客户", "审批中客户", "审批通过客户", "失效客户"],
    sj: ["待调整商机", "审批中商机", "审批通过商机", "失效商机"],
    xm: ["待调整项目", "审批中项目", "审批通过项目", "失效项目"]
}
const barDatas = {
    kh: [44, 67, 98, 33],
    sj: [33, 11, 0, 5],
    xm: [12, 22, 3, 40]
}
let Xdata = reactive(obj.kh)
let barData = reactive(barDatas.kh)
const changeTab = () => {
    Xdata = obj[statisticsTab.value]
    barData = barDatas[statisticsTab.value]
}
// 概况统计-默认-end
// dd
const pieData = reactive([
    {value: 22, name: "国内500强客户", color: "#fd904c"},
    {value: 34, name: "世界500强客户", color: "#ffb800"},
    {value: 89, name: "地方百强客户", color: "#4490d9"},
    {value: 10, name: "其他客户", color: "#b0d8fc"},
])

</script>

<style lang="scss" scoped>
.home{
    height: calc(100vh - 84px - 20px); /**框架header高度80px、内边距综合35px*/
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 55% 45%;
    justify-content: stretch;
    align-items: stretch;
    gap: 15px;
    .flex_column{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .pd10{
        padding: 10px;
    }
    .top{
        grid-column-start: span 3;
        .grid_1{
            overflow-y: auto;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
        }
        .tip{
            background: #fef0f0;
            height: 28px;
            line-height: 28px;
            border-radius: 5px;
            padding: 0 20px;
            font-size: 12px;
        }
        .tipTxt{
            color: #fd7e31;
        }
        .m10{
            margin: 10px;
        }
        :deep(.el-tabs__header){
            margin-bottom: 0px  !important;
        }
    }
    .bottom{
        grid-column-start: span 2;
        :deep(.el-card__body){
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
        .grid_box{
            display: grid;
            grid-template-columns: repeat(auto-fill, 80px);
            grid-template-columns: repeat(auto-fill, 80px);
            gap: 10px;
        }
        .cardBtn{
            width: 80px;
            height: 80px;
            text-align: center;
            border: 1px solid var(--el-color-primary);
            border-radius: 10px;
            font-size: 14px;
            flex-direction: column;
            color: #606266;
            cursor: pointer;
            .svg-icon{
                font-size: 20px;
                color: var(--el-color-primary);
            }
        }
        .cardBtn:hover{
            background: var(--el-color-primary);
            color: #fff;
            .svg-icon{
                color: #fff;
            }
        }
        .line_box{
            height: 100%;
            width: 100%;
            overflow-y: auto;
            .line{
                padding: 3px 10px;
                margin: 10px;
                line-height: 1.2em;
                background: #f8f8f8;
                border-radius: 5px;
                font-size: 14px;
                name{
                    color: var(--el-color-primary);
                    cursor: pointer;
                }
            }
        }
    }
    :deep(.el-card__body){
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: calc(100% - 50px);
    }
}
</style>